<template>
  <el-menu 
    default-active="2" 
    class="el-menu-vertical-demo"
    :style="{ width: counter.isCollapse? '64px' : '200px' }"
    :collapse="counter.isCollapse"
    @open="handleOpen"
    @close="handleClose"
    :unique-opened="false"
  >
    <el-menu-item index="0" class="logo-item">
      <el-icon class="logo-wrapper">
        <img 
          src="/src/assets/images/logo.jpg" 
          class="logo-image"
          :style="{ width: counter.isCollapse? '20px' : '64px' }"
          alt="网站Logo"
        />
      </el-icon>
    </el-menu-item>

    <TreeMenu :index="1" :menuData="menuData" />
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import TreeMenu from './treeMenu.vue'
import { useStore } from '../../stores/counter'

const counter = useStore();
const router = useRouter();
console.log(router);


const menuData = reactive((router.options.routes[2].children)

  // 如果是对象，包装为数组)
)

const mounted = ref(true);
onMounted(() => {
  mounted.value = true;
});

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  HomeFilled, Picture
} from '@element-plus/icons-vue'

//用于控制菜单栏的敞开和收缩状态

const handleOpen = (index: string, indexPath: string[]) => {
  console.log('菜单展开:', index, indexPath);
};

const handleClose = (index: string, indexPath: string[]) => {
  console.log('菜单关闭:', index, indexPath);
};
</script>
<style scoped>
.el-menu-vertical-demo {
  height: 100vh;
  transition: width 0.3s ease;
  background-color: #f8f9fa;
  border-right: none;


    .site-title {
      opacity: 0;
      transition: opacity 0.2s ease;
    }
  }


  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    height: 48px;
    line-height: 48px;
    color: #2c3e50;
    transition: all 0.3s ease;

    &:hover {
      background-color: #e9ecef;
    }

    &.is-active {
      background-color: #e3f2fd;
      color: #2196f3;
      font-weight: 500;
    }
  }

  .logo-item {
    height: 64px;
    margin: 8px 0;
    cursor: default;

    &:hover {
      background-color: transparent !important;
    }

    .logo-wrapper {
      width: 100%;
      justify-content: center;
    }

    .logo-image {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .site-title {
      font-size: 18px;
      font-weight: 600;
      margin-left: 12px;
      color: #1a1a1a;
      transition: opacity 0.3s ease;
    }
  }


:deep(.el-sub-menu) {
  .el-menu {
    background-color: #f1f3f5;
    padding-left: 12px;

    .el-menu-item {
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      margin: 4px 0;
      border-radius: 6px;
    }
  }
}
</style>